<template>
  <div>
    <a-empty :image-style="{ height: '60px' }" v-if="emptyShow && roles.length === 0">
      <span slot="description"> 暂无角色信息 <a @click="addRole" v-has-permission="actionName">去添加</a> </span>
    </a-empty>
    <description-list title="" size="small" :column="1">
      <description-list-item :label="'角色信息( ' + roles.length + ' )'" v-if="roles.length > 0">
        <a-tag color="purple" v-for="role in roles" :key="role.value">{{ role.label }}</a-tag>
      </description-list-item>
    </description-list>
  </div>
</template>

<script>
import { DescriptionList } from '@/components'
const DescriptionListItem = DescriptionList.Item
// 角色面板 - 用于展示用户角色
export default {
  name: 'RolePanel',
  components: { DescriptionList, DescriptionListItem },
  props: {
    roleIds: {
      type: Array,
      default: function () {
        return []
      }
    },
    emptyShow: {
      type: Boolean,
      default: true
    },
    actionName: {
      type: String,
      default: ''
    }
  },
  computed: {
    roles () {
      const roles = []
      const that = this
      this.$store.getters.allRoles.forEach(item => {
        if (that.roleIds.indexOf(item.value) > -1) {
          roles.push(item)
        }
      })
      return roles
    }
  },
  created () {
    console.log('roleIds', this.roleIds)
  },
  methods: {
    addRole () {
      this.$emit('add-action')
    }
  }
}
</script>

<style scoped>

</style>
